<template>
  <div class="app-container">
<el-form :model="admin"  ref="admin" label-width="100px" class="demo-ruleForm">

  <el-form-item label="用户名" prop="title">
    <el-input v-model="admin.username" style="width: 400px;"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="title">
    <el-input v-model="admin.password" style="width: 400px;"></el-input>
  </el-form-item>

  <el-form-item label="邮箱" prop="title">
    <el-input v-model="admin.email" style="width: 400px;"></el-input>
  </el-form-item>

  <el-form-item label="手机号" prop="title">
    <el-input v-model="admin.phone" style="width: 400px;"></el-input>
  </el-form-item>

  <el-form-item label="年龄" prop="title">
    <el-input v-model="admin.age" style="width: 200px;"></el-input>
  </el-form-item>

  <el-form-item label="性别" prop="linkUrl">
    <el-select v-model="admin.sex" placeholder="性别">
      <el-option label="男" :value=1></el-option>
      <el-option label="女" :value=2></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="角色" prop="title">
      <el-transfer v-model="admin.value" :data="Rolelist"></el-transfer>
  </el-form-item>


  <!-- 管理员头像-->
  <el-form-item label="管理员头像" class="avatar" prop="sort">
 <el-upload
   action="http://localhost:8400/api/v1/admin/oss/uploadPicture"
   list-type="picture-card"
   :on-preview="handlePictureCardPreview"
   :on-success="handleAvatarSuccess"
   :on-remove="handleRemove">
   <i class="el-icon-plus"></i>
 </el-upload>
   <img width="100%" :src="this.admin.avator">
   </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm()">保存</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
</div>
</template>
<script>
  import adminApi from'@/api/banner/banner'
  export default {
    data() {
      return {
        admin: {
          id:'',
          username:'',
          password:'',
          email:'',
          phone:'',
          age:0,
          sex:1,
          avator:'',
          value:[],
        },
        Rolelist:[],
        dialogVisible:false
    }
    },
    created() {
       if(this.$route.params && this.$route.params.id){
         this.getAdminById(this.$route.params.id)
       }
       this.getAllRole()
    },
    methods: {
     //上传课程图片
     //上传成功调用
     handleAvatarSuccess(res, file) {
       this.admin.avator = res.data.pictureUrl
     },
     //上传图片之前调用
     handlePictureCardPreview(){

     },
     //删除图片调用
     handleRemove(){

     },
     //查询角色列表
     getAllRole(){
      adminApi.getRoles().then(response =>{
        this.Rolelist=response.data.list
      })
     },
     //添加管理员
     addAdmin(){
       adminApi.addAdmin(this.admin)
       .then(response=>{
         this.$message({
           type: 'success',
           message: '添加成功!'
         });
         this.$router.push({ path: '/admin/table' })
       })
     },

     updateAdmin(){
       adminApi.updateAdmin(this.admin)
       .then(response=>{
         this.$message({
           type: 'success',
           message: '修改成功!'
         });
         this.$router.push({ path: '/admin/table' })
       })
     },
     //重置
     resetForm(){
       this.admin={}
     },
     //根据admiId查询数据，进行修改时的数据回显
     getAdminById(admiId){
       adminApi.getAdminById(admiId)
       .then(response=>{
         this.admin=response.data.admin
       })
     },
     //保存
     submitForm(){
       if(this.$route.params && this.$route.params.id){
         this.updateAdmin()
       }else{
         this.addAdmin()
       }
     }
    }
  }
</script>
<style>
  .avatar{
    width: 300px;
  }
</style>
